<template>
    <div>
        <h3>门店显示</h3>
        <div>
            门店名称:<input type="text" v-model.trim="info.shopname">
            开业时间:<input type="date" v-model="info.openTime">-<input type="date" v-model="info.endTime">
            <input type="button" value="查询" class="btn btn-success" @click="getShopList">
            <input type="button" value="批量删除" class="btn btn-danger" @click="delAll()">
            <input type="button" value="批量启用" class="btn btn-info" @click="updatestateall(true)">
            <input type="button" value="批量禁用" class="btn btn-warning" @click="updatestateall(false)">
            <input type="button" value="批量发布" class="btn btn-warning">
            <input type="button" value="重置" class="btn btn-success" @click="Chong">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td><input type="checkbox" v-model="checked" @change="checkAll"></td>
                    <td>序号</td>
                    <td>门店名称</td>
                    <td>分店名称</td>
                    <td>门店图片</td>
                    <td>门店状态</td>
                    <td>开业时间</td>
                    <td>门店地址</td>
                    <td>门店类型</td>
                    <td>特色</td>
                    <td>电话</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.shopId">
                    <td><input type="checkbox" v-model="ids" :value="item.shopId" @change="checkOne"></td>
                    <td>{{ item.shopId }}</td>
                    <td>{{ item.shopName }}</td>
                    <td>{{ item.brancName }}</td>
                    <td>
                        <img :src="item.photo" width="50" height="50">
                    </td>
                    <td>
                        <!-- {{ item.state == true ? "开启" : "禁用" }} -->
                        <span v-if="item.state == true" style="color: chocolate;">开启</span>
                        <span v-if="item.state == false" style="color:blue">禁用</span>
                    </td>
                    <td>{{ moment(item.openTime).format('YYYY-MM-DD') }}</td>
                    <td>{{ item.addressName }}</td>
                    <td>{{ item.shopType }}</td>
                    <td>{{ item.tese }}</td>
                    <td>{{ item.tel }}</td>
                    <td>
                        <input type="button" value="修改" class="btn btn-warning" @click="update(item.shopId)">
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.shopId)">
                        <input type="button" value="开启" class="btn btn-info" v-if="item.state == false"
                            @click="updateState(item.shopId, true)">
                        <input type="button" value="禁用" class="btn btn-warning" v-if="item.state == true"
                            @click="updateState(item.shopId, false)">
                        <input type="button" value="详情" class="btn btn-danger" @click="find(item.shopId)">
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 分页 -->
        <div>
            <!-- 显示数据 -->
            <span>共{{ data.totalCount }}条</span>
            <span>每页{{ info.pageSize }}条</span>
            <span>当前{{ info.pageIndex }}/{{ data.tatalPage }}</span>
            <!-- 改变页码 -->
            <input type="button" value="首页" @click="goPage(1)">
            <input type="button" value="上一页" @click="goPage(info.pageIndex - 1)">
            <input type="button" :value="item" v-for="item in data.tatalPage" @click="goPage(item)">
            <input type="button" value="下一页" @click="goPage(info.pageIndex + 1)">
            <input type="button" value="尾页" @click="goPage(data.tatalPage)">
            <input type="number" v-model="info.pageIndex">
            <input type="button" value="跳转" @click="goPage(info.pageIndex)">
            <!-- 改变页容量 -->
            <select v-model="info.pageSize" @change="getShopList">
                <option :value="item" v-for="item in arr">每页{{ item }}条</option>
            </select>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
import moment from 'moment';
const router = useRouter();
const route = useRoute();
//生命周期钩子函数  相当于文档就绪函数
onMounted(() => {
    getShopList();
})
const find = (id: any) => {
    router.push({
        path: '/detaukshop',
        query: {
            id: id
        }
    })
}
//改变页码
const goPage = (num: any) => {
    if (num < 1) {
        info.pageIndex = 1;
        return;
    }
    if (num > data.tatalPage) {
        info.pageIndex = data.tatalPage;
        return;
    }
    //改变页码的值
    info.pageIndex = num;
    getShopList();
    checkAll();
}
//页容量数组
let arr = ref([2, 4, 6, 8, 10])
//重置
const Chong = () => {
    info.shopname = '';
    info.openTime = '';
    info.endTime = '';
    getShopList();
}
//控制一个复选框选中还是没选中
let checked = ref(false);
//控制多个复选框选中与没选中
let ids = ref([]);
//实现全选与全不选
const checkAll = () => {
    console.log(checked.value);
    if (checked.value) {
        ids.value = data.list.map((item: any) => {
            return item.shopId
        })
    }
    else {
        ids.value = [];
    }
}
//反选  改变checked的值  true false
const checkOne = () => {
    if (ids.value.length == data.length) {
        checked.value = true
    }
    else {
        checked.value = false
    }
}
//批量修改状态
const updatestateall = (state: any) => {
    if (ids.value.length == 0) {
        alert('必选一项')
        return
    }
    let f = confirm('确定修改状态吗?')
    if (f) {
        axios({
            url: '/api/Shops/UpdateStateAddShop',
            method: 'put',
            params: {
                ids: ids.value.toString(),
                state: state
            }
        })
            .then((res) => {
                console.log(res);
                if (res.data > 0) {
                    alert('修改成功')
                    checked.value = false;
                    ids.value = [];
                    getShopList();
                }
                else {
                    alert('修改失败')
                    checked.value = false;
                    ids.value = []
                    return;
                }
            })
            .catch((err) => {
                console.log(err);

            })
    }
}
//批量删除
const delAll = () => {
    if (ids.value.length == 0) {
        alert('必选一项');
        return
    }
    let f = confirm('确定删除吗?');
    if (f) {
        axios({
            url: '/api/Shops/DeleteShop',
            method: 'put',
            params: {
                ids: ids.value.toString()
            }
        })
            .then((res) => {
                console.log(res);
                if (res.data > 0) {
                    alert('删除成功')
                    checked.value = false;
                    getShopList();
                }
                else {
                    alert('删除失败')
                    checked.value = false;
                    return;
                }
            })
            .catch((err) => {
                console.log(err);

            })
    }
}
//查询条件
let info: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    shopname: '',
    openTime: '',
    endTime: '',
})
//接收后端返回的数据
let data: any = reactive({
    list: [],
    totalCount: 0,//总条数
    tatalPage: 0,
})
//显示
const getShopList = () => {
    axios({
        url: '/api/Shops/GetShopList',
        method: 'get',
        params: info,
    })
        .then((res) => {
            console.log(res);
            Object.assign(data, res.data);
        })
        .catch((err) => {
            console.log(err);
        })
}
//单个修改状态
const updateState = (id: any, state: any) => {
    //1.提示要不要修改状态
    let f = confirm('请问确定要修改状态吗?');
    if (f) {
        //2.发送网络请求
        axios({
            url: '/api/Shops/UpdateState',
            method: 'put',
            params: {
                id: id,
                state: state
            }
        })
            .then((res) => {
                console.log(res);
                if (res.data > 0) {
                    alert('修改状态成功');
                    //3.刷新列表
                    getShopList();
                }
                else {
                    alert('修改状态失败');
                }
            })
            .catch((err) => {
                console.log(err);

            })
    }
};
//删除
const del = (id: any) => {
    let f = confirm('确定要删除吗?')
    if (f) {
        axios({
            url: '/api/Shops/DelShop',
            method: 'delete',
            params: {
                id: id
            }
        })
            .then((res) => {
                console.log(res);
                if (res.data > 0) {
                    alert('删除成功')
                    getShopList();
                    return;
                }
                else {
                    alert('删除成功');
                    return;
                }
            })
            .catch((err) => {
                console.log(err);
            })
    }
}
//修改
const update = (id: any) => {
    router.push({
        path: '/updateshop',
        query: {
            id: id
        }
    })
}
</script>
<style scoped>
span {
    margin: 0 3px;
}
</style>